<template>
  <div class="tapbar">
    <div class="header">
      <div class="title">
        <div class="hea-left">
          <div class="logo">
            <img
              src="https://cdnmusic.migu.cn/tycms_picture/21/10/284/211011091204416_90x26_2051.png"
              alt=""
            />
          </div>
          <div class="header-left">
            <ul class="flex">
              <li v-for="(item, index) in toptit" :key="index">
                <span>{{ item }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="hea-right">
          <div>
            <input type="text" placeholder="搜索歌曲、歌手、MV" name="" id="" />
          </div>
          <div>
            <img
              src="https://cdnmusic.migu.cn/v3/static/img/common/no-login.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="header-hove">
      <div class="header-zhi">
        <router-link tag="span" to="/" active-class="clicklink">首页</router-link>
        <router-link tag="span" to="/playlist" active-class="clicklink">歌单</router-link>
        <router-link tag="span" to="/album" active-class="clicklink">专辑</router-link>
        <router-link tag="span" to="/bangdan" active-class="clicklink">榜单</router-link>
        <router-link tag="span" to="/singer" active-class="clicklink">歌手</router-link>
        <router-link tag="span" to="/money" active-class="clicklink">彩铃</router-link>
        <router-link tag="span" to="/zhoubian" active-class="clicklink">咪咕周边</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Tapbar",
  data() {
    return {
      toptit: null,
      zhotit: null,
    };
  },
  methods: {
    async fn() {
      let { data } = await axios.get("http://localhost:3000/gongong");
      console.log(data);
      this.toptit = data.toptitle;
      console.log(this.toptit);
    },
  },
  created() {
    this.fn();
  },
};
</script>
<style lang='less' scoped>
.tapbar {
  .header {
    width: 100%;
    border-bottom: 1px solid #5555;
    .title {
      width: 1400px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      .hea-left {
        display: flex;
        align-items: center;
        .logo {
          img {
            margin: 21px 0;
          }
        }
        .header-left {
          margin-left: 70px;
          ul {
            display: flex;
            align-items: center;
            li {
              padding: 0 20px;
              line-height: 72px;
            }
          }
        }
      }
      .hea-right {
        display: flex;
        align-items: center;
        div {
          margin: 0 10px;
          input {
            width: 238px;
            height: 38px;
            padding: 0 40px 0 22px;
            border: none;
            background: #f2f2f2;
            border-radius: 50px;
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
  }
  .header-hove {
    width: 1400px;
    margin: 0 auto;
    .header-zhi {
      width: 500px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 50px;
      margin-left: 150px;
      padding: 0 25px;
      font-size: 14px;
    }
  }
}
.clicklink{
    color: red;
}
</style>
